<template>
  <div>
    <el-dialog title="放入公海" :visible.sync="setSeaDialogVisible" width="35%" v-loading="loading">
      <create-sections title="选择公海">
        <el-select v-model="value" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in options" :key="item.id" :label="item.poolName" :value="item.id">
          </el-option>
        </el-select>
      </create-sections>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setSeaDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnSubmit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import CreateSections from "@/components/CreateSections";
import { queryPoolNameListByAuth } from "@/api/customer/customerPool";
import { updateCustomerByIds } from "@/api/customer/customer";

export default {
  name: "seaDialog",
  components: {
    CreateSections
  },
  props: {

  },
  data () {
    return {
      setSeaDialogVisible: false,
      options: [],
      value: '',
      loading: false,
      ids: [],
    };
  },
  methods: {
    queryPoolNameListByAuth () {
      this.loading = true;
      queryPoolNameListByAuth().then(res => {
        this.options = res.data;
        this.loading = false;

      }).catch(error => {
        this.loading = false;
      });

    },
    btnSubmit () {
      var params = {
        ids: this.ids,
        poolId: this.value,
        userId: this.$store.state.user.userId
      }
      this.loading = true;
      updateCustomerByIds(params).then(res => {
        this.closeFun();
      }).catch(error => {
        this.closeFun();
      });
    },
    showFun (ids) {
      this.ids = ids;
      this.queryPoolNameListByAuth();
      this.setSeaDialogVisible = true;
    },
    closeFun () {
      this.loading = false;
      this.setSeaDialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.default-tranfer-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .redIconMO {
    width: 10px;
    height: 10px;
    background: red;
  }

  .button-group {
    em {
      margin-right: 8px;
    }
  }
}

::v-deep .el-transfer-panel__item {
  width: 100%;
}
</style>